<template>
  <el-form ref="formRef" :model="row" :disabled="props.readonly" :hide-required-asterisk="props.readonly">
    <el-row :gutter="20">
      <el-col :span="getSpan(item)" v-for="(item, index) in columns" :key="item.key" :index="index" v-show="item.visible ?? true">
        <el-form-item>
          <template #label>
            <el-space :size="4">
              <span>{{ `${item?.label ?? item.label}` }}</span>
              <el-tooltip v-if="item?.tooltip" effect="dark" :content="item?.tooltip" placement="top">
                <i :class="'iconfont icon-yiwen'"></i>
              </el-tooltip>
            </el-space>
            <span>&nbsp;:</span>
          </template>
          <ProFormItem :column="item" :row="row" :readonly="item.readonly ?? false" :multiple="item.multiple ?? false" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script setup lang="ts" name="ProForm">
import { ref } from "vue";
import { ColumnProps } from "@/components/ProForm/interface";
import ProFormItem from "./components/ProFormItem.vue";
import { FormInstance } from "element-plus";

export interface ProFormProps {
  columns?: ColumnProps[]; // 配置列
  row: { [key: string]: any };
  span?: number;
  readonly?: boolean;
}

// 默认值
const props = withDefaults(defineProps<ProFormProps>(), {
  columns: () => [],
  row: () => ({}),
  span: () => 6
});

// 宽度设置
const getSpan = (item: ColumnProps) => {
  return item?.span ?? props.span;
};

// 提交数据（新增/编辑）
const formRef = ref<FormInstance>();

// 暴露给父组件的参数和方法 (外部需要什么，都可以从这里暴露出去)
defineExpose({
  element: formRef,
  rowData: props.row
});
</script>
